<template>
    <div>
        <el-card>
            <div class="health-card-wh">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div style="border-right: 1px solid #f2f2f2;">
                            <p>体重趋势</p>
                            <VueEcharts style="width: 550px; height: 370px;" :option="option"></VueEcharts>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <p>体重记录</p>
                            <HealthRecordTable :tableData="weightData" :unit="weightUnit"/>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>

         <el-card>
            <div class="health-card-wh">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div style="border-right: 1px solid #f2f2f2;">
                            <p>血糖趋势</p>
                            <VueEcharts style="width: 550px; height: 370px;" :option="option"></VueEcharts>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <p>血糖记录</p>
                            <HealthRecordTable :tableData="xtData" :unit="xtUnit"/>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>

         <el-card>
            <div class="health-card-wh">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div style="border-right: 1px solid #f2f2f2;">
                            <p>血压趋势</p>
                            <VueEcharts style="width: 550px; height: 370px;" :option="option"></VueEcharts>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <p>血压记录</p>
                            <HealthRecordTable :tableData="xyData" :unit="xyUnit"/>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>

         <el-card>
            <div class="health-card-wh">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div style="border-right: 1px solid #f2f2f2;">
                            <p>心率趋势</p>
                            <VueEcharts style="width: 550px; height: 370px;" :option="option"></VueEcharts>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <p>心率记录</p>
                            <HealthRecordTable :tableData="xlData" :unit="xlUnit"/>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>

        <el-button type="primary">添加健康记录</el-button>
        <el-button @click="$router.back()">返回</el-button>
    </div>
</template>

<script setup>

import HealthRecordTable from './HealthRecordTable.vue';

const weightUnit = 'kg'
const xtUnit = 'mmol/L'
const xyUnit = 'mmHg'
const xlUnit = 'bmp'
const weightData = [{data: '49.2'},{data: '49.2'},{ data: '49.2'},{data: '49.2'},{data: '49.2'},{data: '49.2'},{data: '49.2'}]
const xtData = [{data: '4.2'},{data: '4.2'},{ data: '4.2'},{data: '4.2'},{data: '4.2'},{data: '4.2'},{data: '4.2'}]
const xyData = [{data: '80/120'},{data: '80/120'},{ data: '80/120'},{data: '80/120'},{data: '80/120'},{data: '80/120'},{data: '80/120'}]
const xlData = [{data: '70'},{data: '70'},{ data: '70'},{data: '70'},{data: '70'},{data: '70'},{data: '70'}]

const option = {
    xAxis: {
        type: 'category',
        data: ['1/4', '1/24', '1/31', '2/4', '2/14', '2/18', '3/1']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [4.0, 4.5, 5.0, 5.5, 6.0, 5.8, 5.0],
            type: 'line',
            smooth: true
        }
    ]
};
</script>

<style scoped lang="scss">
.health-card-wh {
    width: 1110px;
    height: 400px;
    p {
        font-weight: 500;
        margin-bottom: 20px;
    }
}
.el-card{
    margin-bottom: 20px;
}
.el-button{
    height: 40px;
}
</style>